import 'package:flutter/material.dart';

class Demo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget title = new TitleSection();

    Widget buttonSection = new Container(
      child: new Row(
        children: <Widget>[
          getColumnButton(context, Icons.cached, 'CALL'),
          getColumnButton(context, Icons.near_me, 'ROUTE'),
          getColumnButton(context, Icons.share, 'SHARE'),
        ],
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      ),
    );

    Widget bottomSection = new Container(
      child: new Text('''Dart的另一个好处是，Flutter不会从程序中拆分出额外的模板或布局语言，'''
          '''如JSX或XML，也不需要单独的可视布局工具。以下是一个简单的Flutter视图，用Dart编写：'''),
      padding: EdgeInsets.all(30),
    );
    return new MaterialApp(
      theme: new ThemeData(
        primaryColor: Colors.blue,
        brightness: Brightness.light,
        accentColor: Colors.cyan[600],
      ),
      home: new Scaffold(
        body: new ListView(
          children: <Widget>[
            new Image.asset(
              'images/lake.jpg',
              height: 240,
              fit: BoxFit.cover,
            ),
            title,
            buttonSection,
            bottomSection,
          ],
        ),
      ),
    );
  }

  Column getColumnButton(BuildContext context, IconData icon, String title) {

    Color color = Theme.of(context).primaryColor;
    return new Column(
      children: <Widget>[
        new Icon(icon, color: color),
        new Text(
          title,
          style: new TextStyle(color: color),
        ),
      ],
    );
  }
}

class TitleSection extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _TitleSectionState();
  }
}

class _TitleSectionState extends State {
  bool like = false;
  num count = 44;
  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: EdgeInsets.all(32),
      child: new MaterialButton(
        child: new Row(
          children: <Widget>[
            new Expanded(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    child: new Text('abc'),
                    padding: EdgeInsets.only(bottom: 10),
                  ),
                  new Text('abcf'),
                ],
              ),
            ),
            new IconButton(
              icon: Icon(like ? Icons.star : Icons.star_border),
              color: like ? Colors.red : Colors.grey,
              onPressed: _toggleFavorite,
            ),
            new SizedBox(
              child: new Text(count.toString()),
              width: 20,
            ),
          ],
          crossAxisAlignment: CrossAxisAlignment.center,
        ),
        onPressed: null,
      )
    );
  }

  void _toggleFavorite() {
    setState(() {
      like = !like;
      if (like) {
        count ++;
      } else {
        count --;
      }
    });
  }
}
